用 CSS 水平垂直居中图片

许多开发人员在处理图片时会遇到困难。处理响应式和对齐特别困难，尤其是将图片居中在页面中间。

因此，在这篇文章中，我将展示一些使用不同 CSS 属性在垂直和水平方向上居中图片的最常用方法。

我已经在上一篇文章中介绍了 CSS 定位和显示的属性。如果你不熟悉这些属性，建议你在阅读本文之前先查看这些文章。

这是一个视频版本的介绍。

我们先使用 3 个不同的 CSS 属性将图片水平居中。

使图片水平居中的第一种方法是使用 text-align 属性。但是，仅当图片位于块级容器（例如 ）中时，此方法才有效：

使图片居中的另一种方法是使用 margin: auto 属性（用于左边距和右边距）。

但是，单独使用 margin: auto 将不会生效。 如果需要使用 margin: auto，则还必须使用 2 个其他属性。

margin-auto 属性对内联级别的元素没有任何影响。由于 标签是一个内联元素，因此我们需要先将其转换为块级元素：

其次，我们还需要定义宽度。因此，左边距和右边距可以占用其余的空白空间，并自动对齐，这可以解决问题（除非我们将宽度设置为 100％）：

将图片水平居中的第三种方法是使用 display: flex。就像我们对容器使用 text-align 属性一样，我们对容器也使用 display: flex。

但是，仅使用 display: flex 是不够的。容器还必须有一个 justify-content 属性：

justify-content 属性与 display: flex 一起使用，可以水平对齐图片。

最后，图片的宽度必须小于容器的宽度，否则，它将占用 100％ 的空间，然后我们就无法将其居中。

重要提示：较旧版本的浏览器不支持 display: flex 属性。请点击这里查看更多详细信息。

对于垂直居中，使用 display: flex 非常方便。

考虑以下情况，我们的容器的高度为 800px，但是图片的高度仅为 500px：

在这种情况下，向容器添加一行代码，align-items: center，就可以了：

align-items 和 display: flex 一起用，可以垂直定位属性。

垂直对齐的另一种方法是一起使用 position 和 transform 属性。这个有点复杂，所以让我们一步一步地做。

首先，我们修改将图片的定位方式从 static 修改为 absolute：

它应该位于相对定位的容器内，因此我们相对于其容器 div 添加 position: relative。

其次，我们定义图片的顶部和左侧属性，并将其设置为 50％。这会将图片的起点从左上角移到容器的中心：

但是第二步将图像部分移出了容器。因此，我们需要将其放回内部。

定义一个 transform 属性，并在其 X 和 Y 轴上添加 -50％，可以达到目的：

还有其他方法可以使元素在水平和垂直方向上居中，但是我已经解释了最常见的方法。

希望本文能帮助你了解如何在页面中心对齐图片。

如果你想了解有关 Web 开发的更多信息，请随时访问我的 Youtube channel 以获取更多信息。

谢谢阅读！

原文：How to Center an Image Vertically and Horizontally with CSS，作者：Cem Eygi